<script setup>
import { ref, onMounted, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { FolderOpened } from '@element-plus/icons-vue'
import sHead from '@/components/head.vue'
const isShow = ref(false)
const route = useRoute();
let navName = "";

import head from '@/assets/icon/bendiziyuan.png'
const nav_list = ref([
  {
    name: '项目管理',
    id: 'dh001',
    icon: "icon iconfont icon-a-Property1xuanzhong1",
    path: '/home',
    isgroup: false,
    isdeep: false,
    childern: []
  }
])

const curnav = () => {
  isShow.value = !isShow.value;
}

const filpath = (data) => {
  nav_list.value.forEach(e => {
    if (e.isgroup) {
      e.childern.forEach(c => {
        let path = c.path.split('/')[2];
        if (data == path) {
          c.isdeep = true
        } else {
          c.isdeep = false
        }
      })
    } else {
      let path = e.path.split('/')[e.path.split('/').length - 1];
      if (data == path) {
        e.isdeep = true
      } else {
        e.isdeep = false
      }
    }
  })
}

watch(() => route.path, newRoute => {
  let path = newRoute.split('/')[1];
  if (path == 'history') {
    filpath(newRoute.split('/')[2]);
  } else {
    filpath(path);
  }

})

onMounted(() => {
  let path = window.location.pathname.split('/');
  if (path.indexOf('history') != -1) {
    isShow.value = true
  } else {
    isShow.value = false
  }
})

</script>
<template>
  <div class="left-nav">
    <div class="ln-head">
      <img :src="head" alt="" />
      <span>项目管理</span>
    </div>
    <div class="ln-list" v-for="i in nav_list" :key="i.id">
      <div class="ln-box" v-if="i.isgroup">
        <div
          class="ln-title"
          :class="isShow ? 'lta' : 'lt'"
          @click.stop="curnav(i)"
        >
          <el-icon><FolderOpened /></el-icon>
          <div>
            <span>{{ i.name }}</span>
          </div>
          <i
            :class="
              isShow ? 'icon iconfont icon-xiala-1' : 'icon iconfont icon-xiala'
            "
          ></i>
        </div>
        <div class="ln-nav-b" v-show="isShow">
          <router-link
            class="ln-nav"
            :class="k.isdeep ? 'my-active' : ''"
            v-for="k in i.childern"
            :key="k.id"
            :to="{ path: k.path }"
          >
            <i style="opacity: 0" class="icon iconfont icon-tongjifenxi"></i>
            <div>
              <span>{{ k.name }}</span>
            </div>
          </router-link>
        </div>
      </div>
      <div class="ln-box" v-else>
        <router-link
          class="ln-nav"
          :class="i.isdeep ? 'my-active' : ''"
          :to="{ path: i.path }"
        >
          <el-icon><FolderOpened /></el-icon>
          <div>
            <span>{{ i.name }}</span>
          </div>
        </router-link>
      </div>
    </div>

    <s-head />
  </div>
</template>

<style scoped>
.left-nav {
  width: 160px;
  height: 100%;
  user-select: none;
  color: #fff;
  border-right: 1px solid var(--light-border-el-border-color, #dcdfe6);
  background: #071d49;
  position: relative;
}

.ln-head {
  width: 100%;
  height: 123px;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ln-head img {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
}

.ln-list {
  width: 100%;
  cursor: pointer;
  overflow: hidden;
}

.ln-box {
  overflow: hidden;
}

.ln-title {
  width: 100%;
  height: 50px;
  padding: 0 16px 0 10px;
  display: flex;
  align-items: center;
}

.lt {
  color: #9fb8e9;
}

.lta {
  color: #fff;
}

.ln-title i {
  font-size: 16px;
}

.ln-title div {
  width: 105px;
  margin-left: 8px;
}

.ln-nav-b {
  width: 100%;
  overflow: hidden;
}

.ln-nav {
  width: 100%;
  height: 50px;
  padding-left: 22px;
  display: flex;
  align-items: center;
}

.ln-nav div {
  width: 105px;
  margin-left: 8px;
}
</style>
<style>
.my-active {
  color: #fff !important;
  border-right: 3px solid #387bff;
  background: rgba(56, 123, 255, 0.3);
}
</style>